<template>
  <div class="home-view">
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header flex-between">
          <h2>欢迎使用 Element Plus 模板</h2>
          <el-button type="primary" @click="handleRefresh">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </template>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-statistic title="用户数量" :value="userCount" />
        </el-col>
        <el-col :span="8">
          <el-statistic title="文章数量" :value="articleCount" />
        </el-col>
        <el-col :span="8">
          <el-statistic title="访问量" :value="visitCount" />
        </el-col>
      </el-row>

      <el-divider />

      <el-row :gutter="20">
        <el-col :span="12">
          <h3>功能特性</h3>
          <ul class="feature-list">
            <li>🚀 Vue 3 + Vite 构建</li>
            <li>🎨 Element Plus UI 组件库</li>
            <li>🌊 UnoCSS 原子化CSS</li>
            <li>📦 Pinia 状态管理</li>
            <li>🛣️ Vue Router 路由管理</li>
            <li>🔧 基于 Fetch 的请求封装</li>
            <li>🎯 Lodash-es 工具库</li>
            <li>🆔 Nanoid 唯一ID生成</li>
          </ul>
        </el-col>
        <el-col :span="12">
          <h3>快速操作</h3>
          <div class="quick-actions">
            <el-button type="primary" @click="handleAction('create')">
              <el-icon><Plus /></el-icon>
              新建项目
            </el-button>
            <el-button type="success" @click="handleAction('import')">
              <el-icon><Upload /></el-icon>
              导入数据
            </el-button>
            <el-button type="warning" @click="handleAction('export')">
              <el-icon><Download /></el-icon>
              导出数据
            </el-button>
            <el-button type="info" @click="handleAction('settings')">
              <el-icon><Setting /></el-icon>
              系统设置
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="mt-20">
      <template #header>
        <h3>最近活动</h3>
      </template>
      <el-timeline>
        <el-timeline-item
          v-for="activity in activities"
          :key="activity.id"
          :timestamp="activity.timestamp"
          :type="activity.type"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
// 以下已通过自动引入配置，无需手动导入：
// ref, onMounted, ElMessage, Element Plus图标, nanoid
// stores需要手动导入
import { useAppStore } from '@/stores'

const appStore = useAppStore()

// 统计数据
const userCount = ref(1234)
const articleCount = ref(567)
const visitCount = ref(89012)

// 活动数据
const activities = ref([
  {
    id: nanoid(),
    content: '用户张三创建了新项目',
    timestamp: '2024-01-15 10:30',
    type: 'primary'
  },
  {
    id: nanoid(),
    content: '系统进行了版本更新',
    timestamp: '2024-01-15 09:15',
    type: 'success'
  },
  {
    id: nanoid(),
    content: '数据备份任务完成',
    timestamp: '2024-01-15 08:00',
    type: 'info'
  }
])

// 刷新操作
const handleRefresh = () => {
  appStore.setLoading(true)

  // 模拟数据刷新
  setTimeout(() => {
    userCount.value = Math.floor(Math.random() * 10000)
    articleCount.value = Math.floor(Math.random() * 1000)
    visitCount.value = Math.floor(Math.random() * 100000)

    appStore.setLoading(false)
    ElMessage.success('数据刷新成功')
  }, 1000)
}

// 快速操作
const handleAction = action => {
  const actionMap = {
    create: '新建项目',
    import: '导入数据',
    export: '导出数据',
    settings: '系统设置'
  }

  ElMessage.info(`点击了 ${actionMap[action]}`)
}

onMounted(() => {
  // 页面加载时的初始化操作
  console.log('首页加载完成')
})
</script>

<style scoped>
.home-view {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-actions .el-button {
  justify-content: flex-start;
}
</style>
